<template>
  <div class="HomePage">
    <div v-if="loading" class="loading">
      <div  class="loading-spinner"></div>
    </div>
    <ul class="info">
        <li><img src="../assets/avatar.png" alt="头像"></li>
        <li>姓名： {{ data.studentName }}</li>
        <li>身份证号： {{ data.idCard }}</li>
        <li>性别： {{ !!data.sex ? (data.sex == 0 ? '男' : '女') : '' }}</li>
        <li class="borderTop">专业：
          <span v-for="i in majorSelectList" :key="i.majorId">
             {{ data.majorId == i.majorId ? i.majorName : '' }}
          </span>
        </li>
        <li class="borderBottom">
          <h4>当前状态：</h4>
          <h1 :class="Number(data.zsStatus) < 8 ? Number(data.zsStatus) == 7 ? 'blue' : '' : 'green'">{{getNameById(Number(data.zsStatus))}}</h1>
        </li>
        <li v-if="Number(data.zsStatus) == 6">
          <van-button round block type="primary"  :loading="loadingBtn" loading-text="正在办理中..."  @click="toConfirm">办理确认入学>></van-button>
        </li>
        <li v-if="Number(data.zsStatus) > 6 && noticeContent && noticeContent.length > 1" class="searchResult">请于{{ noticeContent[0] }}至{{ noticeContent[1] }}查询分班结果！</li>
        <li v-if="Number(data.zsStatus) > 6 && noticeContent && noticeContent.length == 1" class="searchResult">{{ noticeContent[0] }}</li>
    </ul>
    <ol v-if="Number(data.zsStatus) == 8" class='down' @click="toDown">
        <li><img src="../assets/xiazai.png"></li>
        <li>查询分班结果/下载报道卡</li>
    </ol>
    <ol v-else>
        <li><img src="../assets/xiazai.png"></li>
        <li>查询分班结果/下载报道卡</li>
    </ol>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import { getStudentInfo, confirm, getMajorList, getClazzDate } from '@/api/login'; // 导入封装的 API 方法
import { useRouter } from "vue-router"  // 引入useRouter
import { Toast } from 'vant';

export default {
  name: 'App',
  setup() {
    const router = useRouter();
    const data = ref({});
    const majorSelectList = ref([]);
    const loading = ref(true);
    const loadingBtn = ref(false);
    const noticeContent = ref([])
    onMounted(() => {
      getInfo();
      majorList();
    });

    const getNameById = (id) => {
      const students = [
        { id: 0, name: '报考' },
        { id: 1, name: '待确认' },
        { id: 2, name: '审核中' },
        { id: 3, name: '驳回' },
        { id: 4, name: '审核通过' },
        { id: 5, name: '未录取' },
        { id: 6, name: '已录取,未确认入学' },
        { id: 7, name: '已确认入学，未分班' },
        { id: 8, name: '已分班' },
      ];
      const student = students.find(s => s.id === id);
      return student ? student.name : '';
    };

    const getInfo = async () => {
      try {
        loading.value = true;
        const response = await getStudentInfo(); // 调用封装的 API 方法
        if (response.code == 200) {  
          data.value = response.data;
          loading.value = false
        }
      } catch (error) {
        Toast.fail('请求失败:', error);
        loading.value = false
      }
      try{
        const noticeType = Number(data.value.zsStatus) > 6 ? 3 : 4;
        const res = await getClazzDate({noticeType})
        console.log(res)
        if(!!res.data && !!res.data.noticeContent){
          noticeContent.value = res.data.noticeContent.split(',') 
        }else{
          noticeContent.value = ['暂未开启分班，敬请期待']
        }
      } catch (error) { 
        Toast.fail('请求失败:', error);
        loading.value = false
      }
    };

    const toConfirm = async () => {
      try {
        loadingBtn.value = true
        const response = await confirm(); // 调用封装的 API 方法
        if (response.code == 200){
          Toast.success(response.msg);
          getInfo();
          loadingBtn.value = false
        }else{
          Toast.fail(response.msg);
          loadingBtn.value = false
        }
      } catch (error) {
        Toast.fail('请求失败:', error);
        loadingBtn.value = false
      }
    };

    const majorList = async () => {
      try {
        const response = await getMajorList(); // 调用封装的 API 方法
        response.forEach(i=>{
          majorSelectList.value.push({majorName:i.majorName,majorId:i.id})
        })
      } catch (error) {
        Toast.fail('请求失败:', error);
      }
    };

    const toDown = () => {
      router.push('/AdmissionCard');
    };
    return {
      data,
      majorSelectList,
      loading,
      getNameById,
      toConfirm,
      toDown,
      loadingBtn,
      noticeContent
    };
  },
};
</script>

<style scoped>
html {
  font-size: 16px;
}
*{
  margin: 0;
  padding: 0;
  font-family: 'Alibaba-PuHuiTi-R';
}
.HomePage{
  max-width: 750px;
  height: 100vh;
  margin: 0 auto;
  background: #0FB3E8;
  overflow: hidden;
}
.info{
  max-width: 88%;
  margin: 5rem auto 0;
  background: #fff;
}
ul,ol,li{
  list-style-type: none;
  color: #353535;
}
ul{
  padding: 1.25rem 0; /* 20px / 16px = 1.25rem */
  border-radius: 0.625rem; /* 10px / 16px = 0.625rem */
  box-shadow: 0.25rem 0rem 2.5rem 0rem #040000;
}
ul li{
  padding: 0.5rem 1.5rem; /* 15px / 16px = 0.9375rem, 32px / 16px = 2rem */
}
ul img{
  width: 5.6rem; /* 90px / 16px = 5.625rem */
  height: 6.6rem; /* 106px / 16px = 6.625rem */
}
ul li.borderTop{
  border-bottom: 1px dashed #E5E5E5;
  padding-bottom: 1.6rem; /* 30px / 16px = 1.875rem */
}
ul li.borderBottom{
  padding-top: 1.6rem; /* 30px / 16px = 1.875rem */
}
h1{
  color: #f00;
  padding-top: 0.9rem; /* 15px / 16px = 0.9375rem */
  font-size: 2.2rem; /* 45px / 16px = 2.8125rem */
}
h1.blue{
  color: #0FB3E8;
}
h1.green{
  color: #7CC71B;
}
button{
  background: #0FB3E8;
  border-radius: 7px;
  letter-spacing: 3px;
}
li.searchResult{
  font-family: Alibaba-PuHuiTi, Alibaba-uHuiTi;
  font-size: 1.26rem;
  color: #f00;
  line-height: 2.06rem;
  margin: 1.5rem 0;
}
ol{
  max-width: 88%;
  margin: 1.25rem auto; /* 20px / 16px = 1.25rem, 100px / 16px = 6.25rem */
  border-radius: 0.625rem;
  background: url(../assets/downBg1.png);
  box-shadow: 0.1875rem 0 1.75rem 0px #040000;
  border-radius: 0.875rem ;
  padding: 3.75rem 0 0; /* 60px / 16px = 3.75rem */
  overflow: hidden;
}
ol.down{
  /* background: radial-gradient(ellipse at 0% 0%, #FE807F 0%, #FE9957 50%, #FFD649 100%); */
  background: url(../assets/downBg.png);
}
ol li:first-child{
  position: relative;
  width: 100%;
  height: 5.6rem; /* 90px / 16px = 5.625rem */
}
ol li img{
  width: 4.06rem; /* 65px / 16px = 4.0625rem */
  height: 3.75rem; /* 60px / 16px = 3.75rem */
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
ol li:nth-child(2){
  font-size: 1.6rem; /* 28px / 16px = 1.75rem */
  color: #FFFFFF;
  line-height: 0.625rem; /* 10px / 16px = 0.625rem */
  text-align: center;
  padding-bottom: 3.125rem;
}
.loading {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(230, 253, 260, 0.9);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 99;
}
@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.loading-spinner {
  position: relative;
  width: 6.625rem;
  height: 3.5rem;
  background-image: linear-gradient(#29d78b 3.125rem, transparent 0),
    linear-gradient(#29d78b 3.125rem, transparent 0),
    linear-gradient(#29d78b 3.125rem, transparent 0),
    linear-gradient(#29d78b 3.125rem, transparent 0),
    radial-gradient(circle 0.875rem, #29d78b 100%, transparent 0);
  background-size: 3rem 0.937rem, 0.937rem 2.1875rem, 0.937rem 2.1875rem, 1.5625rem 0.937rem, 1.75rem 1.75rem;
  background-position: 1.5625rem 0.3125rem, 3.625rem 1.25rem, 1.5625rem 1.0625rem, 0.125rem 2.3125rem, 4.75rem 0px;
  background-repeat: no-repeat;
  transform: rotate(-45deg);
}
.loading-spinner::after,.loading-spinner::before {
    content: "";
    position: absolute;
    left: -2.8125rem;
    top: -0.625rem;
    width: 3.5rem;
    height: 3.5rem;
    border: 0.375rem solid #29d78b;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-image: linear-gradient(#29d78b 4rem, transparent 0),
      linear-gradient(#29d78b 4.125rem, transparent 0),
      radial-gradient(circle 0.25rem, #29d78b 100%, transparent 0);
    background-size: 2.5rem 1px, 1px 2.5rem, 0.5rem 0.5rem;
    background-position: center center;
    -webkit-animation: rotation 0.3s linear infinite;
    animation: rotation 0.3s linear infinite;
}
.loading-spinner::before{
  left: 1.5625rem;
  top: 3.75rem;
}  
/* 屏幕高度大于 900px 的设备 */
  @media (min-height: 900px) {
    .info {
      margin: 5rem auto 0; /* 较小屏幕上下边距 */
    }
  }

  /* 屏幕高度小于 900px 的设备 */
  @media (max-height: 900px) {
    .info {
       margin: 3.5rem auto 0; /* 较小屏幕上下边距 */
    }
     ul li img{
      width: 4.5rem;
      height: 5.5rem;
    }
    ul{
      padding: 1.2rem 0;
    }
    ul li.borderBottom{
      padding-top: 1rem;
    }
    ul li.borderTop{
      padding-bottom: 1rem;
    }
    li.searchResult{
      margin: 1rem 0;
      font-size: 1.1rem;
    }
  }

   /* 屏幕高度小于 800px 的设备 */
  @media (max-height: 800px) {
    .info {
       margin: 3rem auto 0; /* 较小屏幕上下边距 */
    }
    ul li img{
      width: 4rem;
      height: 5rem;
    }
    ul{
      padding: 1rem 0;
    }
    ul li.borderBottom{
      padding-top: 0.8rem;
    }
    ul li.borderTop{
      padding-bottom: 0.8rem;
    }
    h1{
      padding-top: 0.5rem;
    }
    li.searchResult{
      margin: 0.1rem 0;
      font-size: 1.1rem;
    }
    ol{
      margin: 1rem auto;
      padding-top: 3rem
    }
    ol li:first-child{
      height: 4.5rem;
    }
    ol li img{
      top: -1rem;
    }
  }

  /* 屏幕高度小于 700px 的设备 */
  @media (max-height: 700px) {
    .info {
      margin: 2rem auto 0; /* 较小屏幕上下边距 */
    }
    ul li img{
      width: 4rem;
      height: 5rem;
    }
    ul{
      padding: 1rem 0;
    }
    ul li.borderBottom{
      padding-top: 0.8rem;
    }
    ul li.borderTop{
      padding-bottom: 0.8rem;
    }
    h1{
      padding-top: 0.5rem;
    }
    li.searchResult{
      margin: 0;
      font-size: 1.1rem;
    }
    ol{
      margin: 1rem auto;
      padding-top: 2.8rem
    }
    ol li:first-child{
      height: 3.5rem;
    }
    ol li img{
      top: -1.5rem;
    }
    ol li:nth-child(2){
      padding-bottom: 2rem;
    }
  }
</style>